<template>
    <div class="box">
        <div class="tree">
          <ul>
            <mtree :m-data="mData" @setmenu="setmenu"></mtree>   
          </ul>
        </div>
    </div>
</template>

<script>
import mtree from "./component/tree.vue";
import menuData from "./assets/data/menu.json";

export default {
  name: "app",
  components: { mtree },
  data() {
    return {
      mData: []
    };
  },
  methods: {
    setmenu(data, item, key) {
      if (item.isSelected == false) {
        for (let singleData of data) {
          singleData.isSelected = false;
        }
        item.isSelected = true;
      } else {
        item.isSelected = false;
      }
    }
  },
  mounted() {
   this.mData = menuData;
  }
};
</script>

<style scope>
.box {
  width: 280px;
  margin: 30px auto 0;
}
</style>



